<template>
  <div>
    <div>
      <el-form :inline="true" size="medium">
        <el-form-item clearable label="系列：">
          <el-select v-model="queryObj.series_id" placeholder="全部">
            <el-option
              v-for="item in seriesList"
              :key="item.series_id"
              :label="item.series_name"
              :value="item.series_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="评价关键词/线路名称"
            v-model="queryObj.query_value"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="用户昵称"
            v-model="queryObj.nickname"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getMainListReset"
            ><i class="iconfont icon-search"></i>查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="mytable">
      <el-table
        :data="mainList"
        tooltip-effect="dark"
        stripe
        style="width: 100%"
      >
        <el-table-column label="用户昵称">
          <template slot-scope="scope">
            {{scope.row.user_nickname}}
          </template>
        </el-table-column>
        <el-table-column label="产品编号">
          <template slot-scope="scope">
            {{scope.row.commodity_code}}
          </template>
        </el-table-column>
        <el-table-column label="评价内容">
          <template slot-scope="scope">
            {{scope.row.evaluate_content.length>10 ?  scope.row.evaluate_content.slice(0, 10)+'...' : scope.row.evaluate_content.slice(0, 10)}}
          </template>
        </el-table-column>
        <el-table-column label="评分">
          <template slot-scope="scope">
            <el-rate
              disabled
              v-model="scope.row.evaluate_score"
              :colors="colors">
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column label="是否显示" width="150">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_show"
              @change="statusChange($event, scope.row)"
              active-text="显示"
              inactive-text="隐藏"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="golook(scope.row)"
              ><i class="iconfont icon-liulan"></i>查看</el-button
            >
            <el-button type="text" @click="del(scope.row)"
              ><i class="iconfont icon-del"></i>删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="total, sizes, prev, pager, next"
        @current-change="_mainList"
        @size-change="_mainList"
        :page-size.sync="page.limit"
        :page-sizes="pageSizeArr"
        :current-page.sync="page.page"
        :total="page.total"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { getSysEvaluateList,
  deleteEvaluate,
  updateEvaluateShow } from "api/lineManagement/lineEvaluate";
import { pageSizeArr } from "common/config/constConfig";
import { getSeriesAll } from "api/lineManagement/seriesMgAPI";
import { mapMutations } from 'vuex';

export default {
  components: {},
  computed: {},
  data() {
    return {
      showList: {
        1: "显示",
        0: "不显示"
      },
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      auditList: [],
      dialogTableVisible: false,
      pageSizeArr,
      queryObj: {},
      mainList: [],
      seriesList: [],
      page: {
        total: 0,
        page: 1,
        limit: 10
      }
    };
  },
  methods: {
    ...mapMutations('middleData', ['setEvaluateObj']),

    golook(row) {
      // 
      this.setEvaluateObj({...row})
      this.$router.push({
        path: "/home/lineEvaluateDetail"
      });
    },
    // 申请上下架
    async statusChange(value, row) {
      await updateEvaluateShow({
        evaluate_id: row.evaluate_id,
        is_show: value
      })
      this._caozuoAfter('修改成功')
    },
    del(row) {
      this.$confirm("是否确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this._del(row);
      });
    },
    _del(row) {
      deleteEvaluate({evaluate_id: row.evaluate_id}).then(res => {
        this._caozuoAfter(res.rMsg);
      });
    },
    _caozuoAfter(msg) {
      this.dialogFormVisible = false;
      this.$message({
        message: msg,
        type: "success"
      });
      this._mainList();
    },
    getMainListReset() {
      this.page.page = 1;
      this._mainList();
    },
    // 获取
    _mainList() {
      let data = { ...this.queryObj };
      data.pageInfo = { ...this.page };
      getSysEvaluateList(data).then(res => {
        let pageInfo = res.pageInfo;
        this.page.total = pageInfo.Total;
        this.page.page = pageInfo.page;
        this.mainList = res.rData;
      });
    },
    // huo qu 系列
    async _getSeriesAll() {
      let res = await getSeriesAll();
      this.seriesList = res.rData;
    }
  },
  created() {
    this._mainList();
    this._getSeriesAll();
  }
};
</script>

<style lang="scss" scoped></style>
